<template>
	<view class="user-info">
		<view class="user-info-item">
			<view class="title">账号信息</view>
			<view class="item">糗龄: {{getRegAge}}</view>
			<view class="item">糗百ID: {{userDesc.userId}}</view>
		</view>
		<view class="user-info-item">
			<view class="title">个人信息</view>
			<view class="item">星座: {{getXinZuo}}</view>
			<view class="item">生日: {{getBirthDay}}</view>
			<view class="item">职业: {{userDesc.vocation}}</view>
			<view class="item">故乡: {{userDesc.hometown}}</view>
			<view class="item">情感状态: {{userDesc.emotion}}</view>
		</view>
	</view>
</template>

<script>
	import {
		getHoroscope,
		getDayDiff,
		birthFormat
	} from "common/tools/time.js"
	export default {
		props:['userDesc'],
		computed: {
			getRegAge() {
				return getDayDiff(this.userDesc.registerAt)
			},
			getXinZuo() {
				return getHoroscope(this.userDesc.birthday)
			},
			getBirthDay(){
				return birthFormat(this.userDesc.birthday, "YYYY-MM-DD")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-info {
		padding: 0 40upx;

		.user-info-item {
			border-bottom: 1upx solid #DDDDDD;

			.title {
				color: #333333;
				font-size: 34upx;
				padding: 20upx 0;
			}

			.item {
				color: #CCCCCC;
				margin: 9upx 0;
			}
		}
	}
</style>
